Android CustomeViewの作り方 サンプルコード
Androidではいろんなビューの作り方がありますが、複雑な図形や動的な図形を出したいときは、CustomeViewというので作ると便利です。
実戦では使わなかったのですが、勉強したことをまとめておこうと思います。
私の場合はとある画像を配置したいというだけだったのですが、グラフや規則性のある図形などはCustomeViewがもっと活躍するでしょう。
実のところ、何が難しかったかというと、レイアウトファイル(xml)のほうですね。
res/layout/main_activity.xmlファイル内 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res/my.application" //ここで、アプリケーションの名前を指定します android:id="@+id/overlay_dialog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <my.application.view.BaloonUpward //CustomViewを呼び出すのは、この宣言だけで呼び出せます android:id="@+id/baloon_1" android:layout_width="300dp" android:layout_height="300dp" android:drawableLeft="@drawable/baloon_upward" custom:showText="true" //このcustomのパラメーターは、最初のxmlnsで宣言します /> </LinearLayout>
次に、アトリビュートを指定します。attrs.xmlというファイルを/res/values/の中に作り、次のように宣言します。
/res/values/attrs.xml <resources> <declare-styleable name="BaloonUpward"> <!-- <attr name="android:baloonUpward" /> --> <attr name="android:drawableLeft" /> <attr name="showText" format="boolean" /> </declare-styleable> </resources>
CustomView自体を作ります。
public class BaloonUpward extends View { private Drawable mLeftDrawable; public BaloonUpward(Context context) { super(context); } public BaloonUpward(Context context, AttributeSet attrs) { super(context, attrs); try{ TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.BaloonUpward, 0, 0 ); Drawable d = a.getDrawable(R.styleable.BaloonUpward_android_drawableLeft); if (d != null) { setLeftDrawable(d); } a.recycle(); }catch(Exception e){ Log.e("ばるーん", "エラー"+e); } } public void setLeftDrawable(Drawable left) { mLeftDrawable = left; updateContentBounds(); invalidate(); } private void updateContentBounds() { //ここで画像の表示ポジションなどを動的に変更できます。 int left_float = 0; int top_float = 0; if (mLeftDrawable != null) { mLeftDrawable.setBounds(left_float, top_float, 500, 500); } } public void setLeftDrawableResource(int resId) { Drawable d = getResources().getDrawable(resId); setLeftDrawable(d); } @Override protected void onDraw(Canvas canvas) { if (mLeftDrawable != null) { mLeftDrawable.draw(canvas); }else{ Log.d("ばるーん","mLeftDrawableはnull"); } } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //画面のサイズを測ってくれるので、画面サイズにあわせた何かをしたい場合 //ここでやります int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth(); int w = Math.max(minw, MeasureSpec.getSize(widthMeasureSpec)); // Whatever the width ends up being, ask for a height that would let the pie // get as big as it can int minh = (w - (int) 120) + getPaddingBottom() + getPaddingTop(); int h = Math.min(MeasureSpec.getSize(heightMeasureSpec), minh); setMeasuredDimension(w, h); } }
Googleが下記にてサンプルコードを配布しています。
こちらも大変参考になります。
http://developer.android.com/training/custom-views/create-view.html
TechBoosterさん
http://techbooster.jpn.org/andriod/application/3013/
一番参考になったサイト
https://thenewcircle.com/s/post/1663/tutorial_enhancing_android_ui_with_custom_views_dave_smith_video